<template>
    <div>
        列表
        <el-button type="success" @click="productaAdd">添加</el-button>

        <template>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="ID"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="状态">
                    <template slot-scope = "scope">
                        <div v-if="scope.row.status == 0">草稿</div>
                        <div v-if="scope.row.status == 1">提交CFO</div>
                        <div v-if="scope.row.status == 2">CFO审核通过</div>
                        <div v-if="scope.row.status == 3">CFO审核不通过</div>
                        <div v-if="scope.row.status == 4">CEO审核通过</div>
                        <div v-if="scope.row.status == 5">CEO审核不通过</div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope = "scope">
                        <el-button type="info" @click="submit(scope.row.id)" v-if="scope.row.status == 0 && userType ==0"  >提交到cfo</el-button>
                        <el-button type="info" @click="cfoAudit(scope.row.id,true)" v-if="scope.row.status == 1 && userType ==1"  >cfo审核成功</el-button>
                        <el-button type="info" @click="cfoAudit(scope.row.id,false)" v-if="scope.row.status == 1 && userType ==1"  >cfo审核失败</el-button>
                        <el-button type="info" @click="ceoAudit(scope.row.id,true)" v-if="scope.row.status == 2 && userType ==2"  >ceo审核成功</el-button>
                        <el-button type="info" @click="ceoAudit(scope.row.id,false)" v-if="scope.row.status == 2 && userType ==2"  >ceo审核失败</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageNo"
                        :page-sizes="[2, 4, 6, 8]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </template>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                tableData: [],
                currentPage4: 5,
                pageNo:1,
                pageSize:2,
                total:0,
                userType:-1
            }
        },
        methods: {
            productaAdd() {
                this.$router.push("product");
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.findPage();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageNo=val
                this.findPage();
            },
            findPage(){
                axios.post("http://localhost:8086/api/product/findPage/"+this.pageNo+"/"+this.pageSize).then(res =>{
                    if(res.data){
                        this.tableData = res.data.records;
                        this.total =  res.data.total;
                    }
                })
            },
            submit(id){
                axios.get("http://localhost:8086/api/product/submit/"+id).then(res =>{
                    alert(res.data.msg);
                    this.findPage();
                })
            },
            cfoAudit(id,ok){
                axios.get("http://localhost:8086/api/product/cfoAudit/"+id+"/"+ok).then(res =>{
                    alert(res.data.msg);
                    this.findPage();
                })
            },
            ceoAudit(id,ok){
                axios.get("http://localhost:8086/api/product/ceoAudit/"+id+"/"+ok).then(res =>{
                    alert(res.data.msg);
                    this.findPage();
                })
            },

        },
        created() {
            this.findPage();
            this.userType=sessionStorage.getItem("type")
        }
    }
</script>
<style>

</style>